<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Form Validation JQuery</title>
    <style>
        form {
            width: 200px;
            margin: 0 auto;
        }

        form > div {
            margin-top: 10px;
        }
    </style>
</head>
<body>
<form action="#" method="get" id="form-validation">
    <div>
        <label for="email">邮箱</label>
        <input type="text" name="email" id="email">
    </div>
    <div>
        <label for="password">密码</label>
        <input type="password" name="password" id="password">
    </div>
    <div>
        <button type="submit">提交</button>
    </div>
</form>
<script src="js/jquery-1.12.0.min.js" type="application/javascript" rel="script"></script>
<script>
	$(document).ready(function () {
		$('#form-validation').submit(function (e) {
			var email = $('#email');
			var password = $('#password');
			var errorCount = 0;
			var errorMessage = '';
			if (isEmpty(email.val())) {
				errorMessage += '邮箱不能为空 \n';
				errorCount++;
			}
			if (isEmpty(password.val())) {
				errorMessage += '密码不能为空 \n';
				errorCount++;
			}

			if (email.val().length < 10) {
				errorMessage += '邮箱长度不能小于10个字节 \n';
				errorCount++;
            }

			if (password.val().length < 8) {
				errorMessage += '密码长度不能小于8个字节 \n';
				errorCount++;
			}

			if (isEmail(email.val())) {
				errorMessage += '邮箱格式不正确';
                errorCount++;
			}

			if (errorCount > 0) {
				alert('一共发现' + errorCount + '个错误\n' + errorMessage);
				e.preventDefault();
			}
		});
	});

	function isEmail (str) {
		var reg = /^(\w-*\.*)+@(\w-?)+(\.\w{2,})+$/;
		return !reg.test(str);
	}

	function isEmpty (str) {
		return str.length <= 0 || str === '' || str === undefined || str === null;
	}
</script>
</body>
</html>